Kasutajakogemuse parandamine: põhjalik juhend CSS View Transitions API kohta

Tänapäeva dünaamilisel veebimaastikul on kasutajakogemus (UX) esmatähtis. Sujuv navigeerimine ja kaasahaarav interaktsioon on võtmetähtsusega, et hoida kasutajaid rahulolevana ja panna neid tagasi tulema. Üks võimas tööriist selle saavutamiseks on CSS View Transitions API, suhteliselt uus brauseri funktsioon, mis võimaldab arendajatel luua sujuvaid ja visuaalselt meeldivaid üleminekuid veebirakenduse erinevate olekute või lehtede vahel.

Mis on CSS View Transitions API?

CSS View Transitions API pakub standardiseeritud viisi visuaalsete muutuste animeerimiseks, mis toimuvad veebirakenduse erinevate olekute vahel navigeerimisel. Mõelge sellest kui viisist, kuidas orkestreerida sujuvaid hajumisi, libisemisi ja muid visuaalseid efekte, kui sisu ekraanil uueneb. Enne seda API-t tuginesid arendajad sarnaste efektide saavutamiseks sageli JavaScripti teekidele ja keerukatele CSS-animatsioonidele, mis võis olla tülikas ja põhjustada jõudlusprobleeme. View Transitions API pakub sujuvamat ja jõudluselt paremat lähenemist.

API põhiidee on jäädvustada DOM-i (Document Object Model) "enne" ja "pärast" olekud ning seejärel animeerida nendevahelisi erinevusi. Brauser teeb ära suurema osa tööst animatsiooni loomisel, vabastades arendajad vajadusest kirjutada keerukat animatsioonikoodi käsitsi. See mitte ainult ei lihtsusta arendusprotsessi, vaid aitab ka tagada sujuvamad ja parema jõudlusega üleminekud.

Miks kasutada CSS View Transitions API-t?

• Parem kasutajakogemus: Sujuvad üleminekud muudavad navigeerimise loomulikumaks ja kaasahaaravamaks, mis viib parema üldise kasutajakogemuseni. Kujutage ette navigeerimist e-poe tootelehtede vahel sujuva libiseva animatsiooniga järsu hüppe asemel. See loob järjepidevuse ja viimistletuse tunde.
• Täiustatud tajutav jõudlus: Isegi kui tegelik laadimisaeg jääb samaks, võivad sujuvad üleminekud muuta veebisaidi kiiremaks. Visuaalne tagasiside annab kasutajatele mulje, et rakendus on reageeriv ja tõhus. Mõelge, kuidas nutiseadmete rakendused kasutavad sageli üleminekuid laadimisaegade varjamiseks.
• Lihtsustatud arendus: API lihtsustab keerukate animatsioonide loomise protsessi, vähendades vajaliku koodi hulka ja muutes selle hooldamise lihtsamaks. Enam ei ole sassis JavaScripti animatsiooniteekide rägastikke!
• Natiivne brauseritugi: Natiivse brauseri funktsioonina saab View Transitions API kasu brauseri optimeerimistest, mis võib potentsiaalselt viia parema jõudluseni võrreldes JavaScripti-põhiste lahendustega. Brauser saab optimaalse efektiivsuse saavutamiseks kasutada oma sisemist renderdusmootorit.
• Juurdepääsetavus: Hästi kujundatud üleminekud võivad parandada juurdepääsetavust, pakkudes selgeid visuaalseid vihjeid selle kohta, kuidas rakendus muutub. Kognitiivsete puuetega kasutajad võivad nendest visuaalsetest vihjetest kasu saada, kuna need aitavad neil rakenduse voogu mõista. Siiski on oluline tagada, et üleminekud ei põhjustaks liikumisvaevust ega häiriks tähelepanu; mõne kasutaja jaoks võib olla vajalik pakkuda võimalusi nende keelamiseks.

Kuidas see töötab?

Siin on lihtsustatud näide:

            
  function updateContent(newContent) {
    document.startViewTransition(() => {
      // Uuenda DOM-i uue sisuga
      document.querySelector('#content').innerHTML = newContent;
    });
  }

            

              
                Copy
              
            
          

Vaatame selle koodi lähemalt:

1. `updateContent(newContent)`: See funktsioon võtab uue kuvatava sisu argumendina.
2. `document.startViewTransition(() => { ... });`: See on API tuum. See annab brauserile käsu alustada vaate üleminekut. Funktsioon, mis antakse argumendina `startViewTransition`-ile, käivitatakse.
3. `document.querySelector('#content').innerHTML = newContent;`: Tagasikutse sees uuendate DOM-i uue sisuga. Siin teete lehel muudatusi, mida soovite animeerida.

Brauser tegeleb ülejäänuga. See jäädvustab DOM-i oleku enne ja pärast `innerHTML` uuendust ning loob sujuva ülemineku nende kahe oleku vahel.

Põhiline rakendamise näide

Siin on täielikum näide HTML-i, CSS-i ja JavaScriptiga:

HTML (index.html):

            
<!DOCTYPE html>
<html lang="et">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>View Transitions demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <button data-target="home">Avaleht</button>
    <button data-target="about">Meist</button>
    <button data-target="contact">Kontakt</button>
  </nav>

  <div id="content">
    <h1>Avaleht</h1>
    <p>Tere tulemast avalehele!</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

            

              
                Copy
              
            
          

CSS (style.css):

            
body {
  font-family: sans-serif;
  margin: 20px;
}

nav {
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #3e8e41;
}

/* Üleminevate elementide stiilid */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fadeOut;
}

::view-transition-new(root) {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

            

              
                Copy
              
            
          

JavaScript (script.js):

            
const contentDiv = document.getElementById('content');
const navButtons = document.querySelectorAll('nav button');

const pages = {
  home: '<h1>Avaleht</h1><p>Tere tulemast avalehele!</p>',
  about: '<h1>Meist</h1><p>Lisateavet meie kohta.</p>',
  contact: '<h1>Kontakt</h1><p>Võtke meiega ühendust.</p>',
};

function updateContent(target) {
  document.startViewTransition(() => {
    contentDiv.innerHTML = pages[target];
    document.documentElement.scrollTop = 0; // Lähtesta kerimisasend
  });
}

navButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    const target = event.target.dataset.target;
    updateContent(target);
  });
});

            

              
                Copy
              
            
          

Selles näites käivitab navigeerimisnuppude klõpsamine sisu uuendamisel hajumisülemineku. CSS määratleb `fadeIn` ja `fadeOut` animatsioonid ning JavaScript kasutab `document.startViewTransition` ülemineku orkestreerimiseks.

Täpsemad tehnikad ja kohandamine

CSS View Transitions API pakub mitmeid täpsemaid funktsioone üleminekute kohandamiseks:

1. Nimega üleminekud

Saate määrata konkreetsetele elementidele nimesid, et luua sihipärasemaid üleminekuid. Näiteks võite soovida, et konkreetne pilt liiguks sujuvalt ühest asukohast teise lehtede vahel navigeerimisel.

HTML:

            
<img src="image1.jpg" alt="Image 1" style="view-transition-name: hero-image;">

            

              
                Copy
              
            
          

CSS:

            
::view-transition-group(hero-image) {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
}

            

              
                Copy
              
            
          

See kood määrab pildile nime `hero-image`. CSS sihib seejärel seda konkreetset üleminekugruppi, et rakendada kohandatud animatsiooni. Pseudo-element `::view-transition-group()` võimaldab teil stiilida konkreetseid üleminevaid elemente.

2. Atribuut view-transition-name

See CSS-i atribuut võimaldab teil määrata nime elemendile, mis osaleb vaate üleminekul. Kui kahel elemendil erinevatel lehtedel on sama `view-transition-name`, püüab brauser luua nende vahel sujuva ülemineku. See on eriti kasulik jagatud elementide üleminekute loomiseks, kus element näib sujuvalt ühelt lehelt teisele liikuvat.

3. Juhtimine JavaScriptiga

Kuigi API on peamiselt CSS-põhine, saate üleminekuprotsessi juhtimiseks kasutada ka JavaScripti. Näiteks saate kuulata sündmust `view-transition-ready`, et teha toiminguid enne ülemineku algust, või sündmust `view-transition-finished`, et käivitada kood pärast ülemineku lõppu.

            
document.startViewTransition(() => {
  // Uuenda DOM-i
  return Promise.resolve(); // Valikuline: tagasta Promise
}).then((transition) => {
  transition.finished.then(() => {
    // Üleminek on lõppenud
    console.log('Üleminek on lõpetatud!');
  });
});

            

              
                Copy
              
            
          

Atribuut `transition.finished` tagastab Promise'i, mis laheneb, kui üleminek on lõpule viidud. See võimaldab teil sooritada toiminguid, näiteks laadida lisasisu või uuendada kasutajaliidest pärast animatsiooni lõppu.

4. Asünkroonsete operatsioonide käsitlemine

Kui teete DOM-i uuendusi `document.startViewTransition()` tagasikutse sees, saate tagastada Promise'i, et tagada, et üleminek ei alga enne asünkroonse operatsiooni lõppu. See on kasulik stsenaariumide puhul, kus peate enne kasutajaliidese uuendamist andmeid API-st hankima.

            
function updateContent(newContent) {
  document.startViewTransition(() => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // Uuenda DOM-i hangitud andmetega
        document.querySelector('#content').innerHTML = data.content;
      });
  });
}

            

              
                Copy
              
            
          

5. Kohandatud CSS-üleminekud

View Transitions API tõeline jõud peitub võimes kohandada üleminekuid CSS-iga. Saate kasutada CSS-animatsioone ja üleminekuid, et luua laia valikut efekte, nagu hajumised, libisemised, suumid ja palju muud. Katsetage erinevate CSS-i atribuutidega, et saavutada soovitud visuaalne efekt.

CSS:

            
::view-transition-old(root) {
  animation: slideOut 0.5s ease-in-out forwards;
}

::view-transition-new(root) {
  animation: slideIn 0.5s ease-in-out forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

            

              
                Copy
              
            
          

See näide loob libiseva ülemineku efekti.

Brauseri ühilduvus ja polüfillid

CSS View Transitions API on suhteliselt uus funktsioon, seega brauseritugi on endiselt arenemas. 2023. aasta lõpu seisuga on Chrome'il ja Edge'il hea tugi. Firefox ja Safari töötavad selle rakendamise kallal. Enne API kasutamist tootmises on oluline kontrollida praegust brauseri ühilduvust ja kaaluda polüfilli kasutamist vanemate brauserite jaoks. Polüfill on JavaScripti koodijupp, mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites, mis seda natiivselt ei toeta.

Võite kasutada polüfilli nagu see siin GitHubis, et pakkuda tuge brauseritele, millel veel natiivset tuge ei ole. Ärge unustage oma rakendust põhjalikult testida erinevates brauserites, et tagada ühtlane kasutajakogemus.

Parimad tavad ja kaalutlused

• Jõudlus: Kuigi View Transitions API on üldiselt hea jõudlusega, on oluline vältida liiga keerukate animatsioonide loomist, mis võiksid jõudlust mõjutada. Hoidke animatsioonid lihtsad ja optimeeritud parimate tulemuste saavutamiseks.
• Juurdepääsetavus: Pidage meeles kasutajaid, kes võivad olla liikumise suhtes tundlikud. Vajadusel pakkuge võimalust üleminekud keelata. Kaaluge `prefers-reduced-motion` meediapäringu kasutamist, et tuvastada, kas kasutaja on oma süsteemiseadetes soovinud vähendatud liikumist.
• Progressiivne täiustamine: Kasutage View Transitions API-t progressiivse täiustamisena. Veenduge, et teie rakendus toimiks korrektselt ka siis, kui brauser API-t ei toeta.
• Testimine: Testige oma üleminekuid põhjalikult erinevates seadmetes ja brauserites, et tagada ühtlane ja sujuv kogemus.
• Varumehhanism: Rakendage varumehhanism brauseritele, mis ei toeta View Transitions API-t. See võib hõlmata lihtsat sissehajumisefekti või vähem keerukat üleminekut.
• Tähendusrikkad üleminekud: Veenduge, et teie üleminekud oleksid tähendusrikkad ja aitaksid kaasa kasutajakogemusele. Vältige üleminekute kasutamist lihtsalt niisama; neil peaks olema eesmärk ja need peaksid parandama rakenduse voogu.

Kasutusjuhud ja näited

CSS View Transitions API-t saab kasutada mitmesugustes stsenaariumides kasutajakogemuse parandamiseks:

• Üheleheküljelised rakendused (SPA-d): Sujuvad üleminekud SPA erinevate vaadete vahel võivad muuta rakenduse reageerivamaks ja natiivsemaks.
• E-kaubanduse veebisaidid: Üleminekud tootelehtede, ostukorvide ja kassaprotsesside vahel võivad luua kaasahaaravama ja sujuvama ostukogemuse. Näiteks tootepildi sujuv üleminek tootelehelt ostukorvi ikoonile.
• Pildigaleriid: Looge visuaalselt meeldivaid üleminekuid galeriis piltide vahel navigeerimisel. Sissesuumimisefekt või libisev animatsioon võib sirvimiskogemust parandada.
• Armatuurlaua liidesed: Üleminekud armatuurlaua erinevate jaotiste või vidinate vahel võivad parandada teabe selgust ja voogu.
• Progressiivsed veebirakendused (PWA-d): Lisage PWA-dele natiivseid üleminekuid, et muuta need kasutaja operatsioonisüsteemiga paremini integreerituks.
• Mobiilirakendused (kasutades veebitehnoloogiaid): Hübriidsed mobiilirakendused, mis on ehitatud tehnoloogiatega nagu React Native või Ionic, saavad kasutada View Transitions API-t, et luua sujuvaid üleminekuid ekraanide vahel.
• Rahvusvahelised veebisaidid: Mitme keeleversiooniga veebisaidid saavad kasutada üleminekuid sisuuuenduste sujuvaks animeerimiseks, kui kasutaja keelt vahetab. Näiteks rist-hajumine lõigu inglise- ja hispaaniakeelse versiooni vahel. Üleminekute kujundamisel ärge unustage arvestada erinevate keelte suunaga (vasakult paremale vs. paremalt vasakule).

Globaalsed kaalutlused

View Transitions API rakendamisel globaalselt kättesaadaval veebisaidil arvestage järgmisega:

• Keele suund: Üleminekud peaksid kohanduma keele suunaga (vasakult paremale või paremalt vasakule). Näiteks libisev üleminek peaks araabia või heebrea keeles liikuma paremalt vasakule.
• Kultuurilised eelistused: Olge teadlik kultuurilistest eelistustest seoses liikumise ja animatsiooniga. Mõned kultuurid võivad pidada liigset animatsiooni häirivaks või isegi solvavaks.
• Juurdepääsetavus: Veenduge, et üleminekud on kättesaadavad puuetega kasutajatele, sealhulgas nägemispuudega või liikumistundlikele inimestele. Pakkuge võimalusi üleminekute keelamiseks või intensiivsuse vähendamiseks.
• Võrgutingimused: Arvestage kasutajatega, kellel on aeglane või ebausaldusväärne internetiühendus. Üleminekud peaksid olema optimeeritud jõudluse jaoks ega tohiks oluliselt suurendada lehe laadimisaegu.

Kokkuvõte

Mõistes selles juhendis kirjeldatud kontseptsioone ja tehnikaid, saate hakata kasutama CSS View Transitions API-t, et luua viimistletumaid ja kaasahaaravamaid veebirakendusi. Katsetage erinevate üleminekutega, kohandage neid vastavalt oma konkreetsetele vajadustele ning seadke alati esikohale kasutajakogemus ja juurdepääsetavus. View Transitions API on võimas tööriist, mis aitab teil luua veebirakendusi, mis on nii visuaalselt meeldivad kui ka väga funktsionaalsed.